<template>
	<view>
		<view class="form_split_10"></view>
		<u-empty text="没有找到对应的数据" v-if="show_empty === true" />
		<view v-else>
			<view class="list_wrapper">
				<view v-for="(item, index) in dataset" :key="index" @click="handleClick(item)">
					<view class="list">
						<view class="tx1">
							<view class="avatar_box">
								<image :src="item.photo_img_src" alt="照片"></image>
							</view>
							<view class="name">
								<view class="name_txt">{{ item.fullname }}</view>
								<view class="level" v-if="item.high_quality == 1"></view>
								<view class="clear"></view>
								<view class="time">{{ item.addtime|timeFilter }}</view>
							</view>
							<view class="some">
								{{ item.age }}岁 · {{ item.sex_text }} ·
								{{ item.education_text }} · {{ item.experience_text }}
							</view>
						</view>
						<view class="tx2">
							想找
							<text class="text">{{ item.intention_jobs }}</text>
							工作
						</view>
						<view class="tx2">
							想在
							<text class="text">{{ item.intention_district }}</text>
							工作
						</view>
						<view class="tx3" v-if="item.recent_work != ''">
							最近职位：{{ item.recent_work }}
						</view>
						<view class="tx3" v-else>
							{{ item.current_text }}
						</view>
						<view class="tx4">
							<view class="list_btn" @click.stop="openCollectModal(item,index)">取消收藏</view>
							<view class="clear"></view>
						</view>
					</view>
					<view class="form_split_10"></view>
				</view>
			</view>
			<u-loadmore v-if="dataset.length >= params.pagesize" class="u-loadmore" :status="finished_status" />
			<u-top-tips ref="uTips"></u-top-tips>
			<u-modal v-model="collectModal" title="系统提示" show-cancel-button content="确定取消收藏该简历吗？"
				@confirm="handlerCancel"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		formatTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import ScrollNav from '@/components/ScrollNav'
	export default {
		name: 'ResumeFavorites',
		components: {
			ScrollNav
		},
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			}
		},
		data() {
			return {
				finished_status: 'loadmore', // 上拉加载
				collectModal: false, //取消收藏提示框
				dataset: [],
				show_empty: false,
				params: {
					page: 1,
					pagesize: 15
				}
			}
		},
		mounted() {
			this.fetchData(true)
		},
		methods: {
			handleClick(item) {
				uni.navigateTo({
					url: '/commonViews/ResumeShow?id=' + item.resume_id
				})
			},
			fetchData(init) {
				this.show_empty = false
				if (init === true) {
					this.params.page = 1
				} else {
					this.finished_status = 'loading'
				}
				http
					.get(api.company_fav_list, this.params)
					.then(res => {
						if (init === true) {
							this.dataset = [...res.data.data.items]
						} else {
							this.dataset = this.dataset.concat(res.data.data.items)
						}

						// 数据全部加载完成
						if (res.data.data.items.length < this.params.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length === 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			/**
			 * 取消弹窗开启
			 * @item 当前点击项（列表的某一条数据）
			 * @index 当前点击项（下标）
			 * */
			openCollectModal(item, index) {
				this.collectItemData = item
				this.collectItemData.itemIndex = index
				this.collectModal = true
			},
			/**
			 * 取消收藏弹窗确认事件
			 * */
			handlerCancel() {
				http
					.post(api.company_fav_cancel, {
						id: this.collectItemData.id
					})
					.then(res => {
						this.$refs.uTips.show({
							title: '取消收藏成功',
							type: 'success'
						})
						this.dataset.splice(this.collectItemData.itemIndex, 1)
					})
					.catch(() => {})
			},
			onload() {
				this.params.page++
				this.fetchData(false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list_wrapper {
		.list {
			.tx4 {
				.list_btn {
					float: right;
					font-size: 24rpx;
					padding: 8rpx 36rpx;
					background-color: #fff;
					border: 2rpx solid #e2e2e2;
					margin-left: 24rpx;
					border-radius: 52rpx;

					&.orange {
						border-color: #ff5d24;
						color: #ff5d24;
					}
				}

				position: relative;
				width: 100%;
				border-top: 2rpx dashed #eeeeee;
				padding: 24rpx 0;
				text-align: right;
			}

			.tx3 {
				.link {
					color: #1787fb;
				}

				font-size: 26rpx;
				color: #999999;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-bottom: 32rpx;
			}

			.tx2 {
				.text {
					color: #666666;
				}

				font-size: 26rpx;
				color: #999999;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin-bottom: 16rpx;
			}

			.tx1 {
				.new {
					position: absolute;
					right: -30rpx;
					top: 0;
					width: 48rpx;
					height: 48rpx;
					background-image: url($ImgUrl + "arrow_new_ico.svg");
					background-repeat: no-repeat;
					background-position: 0;
					background-size: 48rpx;
				}

				.avatar_box {
					image {
						width: 98rpx;
						height: 98rpx;
						border: 0;
						border-radius: 100%;
					}

					position: absolute;
					left: 0;
					top: 36rpx;
					width: 98rpx;
					height: 98rpx;
				}

				.some {
					font-size: 30rpx;
					color: #666666;
					padding: 0 0 0;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					margin-bottom: 22rpx;
				}

				.name {
					margin-bottom: 14rpx;

					.time {
						position: absolute;
						right: 0;
						top: 48rpx;
						font-size: 24rpx;
						color: #999999;
					}

					.level {
						float: left;
						width: 70rpx;
						height: 50rpx;
						background-image: url($ImgUrl + "level_hight_ico.png");
						background-position: 0 12rpx;
						background-repeat: no-repeat;
						background-size: 70rpx 28rpx;
					}

					.name_txt {
						float: left;
						font-size: 36rpx;
						font-weight: bold;
						color: #333333;
						padding-right: 16rpx;
						max-width: 350rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					padding-top: 42rpx;
					position: relative;
				}

				position: relative;
				padding-left: 126rpx;
			}

			width: 100%;
			background-color: #ffffff;
			padding: 0 30rpx;
		}

		width: 100%;
	}
</style>
